@import "../../../src/scss/functions";
@import "../../../src/scss/variables";
@import "../../../src/scss/mixins";

$sidebar-width: 256px;
$navbar-bg-color: #7952b3;
$demo-primary-color: #7952b3;

root {
  min-width: 920px;
  min-height: 480px;
}
.demo-navbar {
  width: 100%;
  background-color: $navbar-bg-color;

  .navbar-brand {
    width: 37.75px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #fff;
    border-radius: 5px;
  }
  .navbar-nav .icon {
    font-size: 16px;
  }
  .navbar-nav.float-right {
    padding-top: $navbar-padding-y;
    padding-right: $navbar-padding-x;
  }
  .nav-item.active .nav-link {
    font-weight: bold;
  }
  .btn-outline-yellow:active, .btn-outline-yellow:hover {
    color: #2a2730;
  }
}
.demo-body {
  height: 100%;
  padding-top: 52px;
}
.docs-body {
  height: 100%;
}
.home-masthead {
  padding: rem2px(5) rem2px(1);

  h1 {
    color: #7952b3;
  }
  .button-container {
    margin: -5px -5px 14px -5px;
    padding: 5px;
  }
}
.demo-sidebar {
  height: 100%;
  width: $sidebar-width;
  background-color: #fff;
  border-right: 1px solid $border-color;

  .demo-links {
    padding-top: rem2px(1);
    padding-bottom: rem2px(1);
  }
  .subnav .nav-item {
    padding-left: rem2px(1);

    .nav-link {
      color: rgba(0,0,0,.65);

      &:hover {
        color: rgba(0,0,0,.85);
      }
    }

    &.active {
      background-color: rgba($demo-primary-color, .1);
    }
  }
  .nav-header {
    font-weight: bold;
  }
}
.demo-content-wrapper {
  height: 100%;
  padding: 0 0 0 $sidebar-width;

  h2 {
    margin-top: rem2px(2);
  }
  h2:first-child, .demo-box h2 {
    margin-top: 0;
  }
  .view {
    padding: rem2px(1) rem2px(2) rem2px(1) rem2px(2);
  }
  .button-container {
    margin: -5px -5px 5px -5px;
    padding: 5px;

    .btn {
      margin-right: map-get($spacers, 2);
    }
  }
}
.code-block {
  padding: rem2px(1.5);
  background-color: #f7f7f9;
  margin-bottom: rem2px(1.5);
}
.demo-box {
  border: rem2px(.2) solid #f7f7f9;
  margin-bottom: rem2px(1.5);

  .demo-preview-box {
    padding: rem2px(1.5);
  }
  .code-block {
    margin-bottom: 0;
  }
  &.buttons-demo .demo-preview-box {
    padding: rem2px(1) rem2px(1.25);

    .btn {
      margin: rem2px(.25) rem2px(.5);
    }
  }
  &.block-buttons-demo .demo-preview-box {
    padding: rem2px(1.25) rem2px(1.5);

    .btn {
      margin: rem2px(.25) 0;
    }
  }
  &.icons-demo .demo-preview-box {
    padding-left: rem2px(1.25) - 12px;
    padding-bottom: rem2px(1) - 12px;

    .icon {
      padding: 12px;
      font-size: 24px;
      line-height: 24px;
      border: 1px solid #eee;
      margin: 0 0 12px 12px;

      &:hover {
        color: #fff;
        background-color: #6F6F6F;
      }
      &:active {
        color: #fff;
        background-color: $demo-primary-color;
      }
    }
  }
  &.forms-sizing-demo {
    .demo-preview-box {
      padding: rem2px(1.5) + 4px;
      padding-bottom: rem2px(.5);
    }
    .form-control {
      width: auto;
      margin-top: -4px;
      margin-left: -4px;
      margin-right: -4px;
      margin-bottom: rem2px(1);
    }
  }
  &.layout-demo {
    .container {
      max-width: 400px;
    }
  }
  &.grid-demo {
    .col {
      color: darken($demo-primary-color, 20);
      text-align: center;
      padding: rem2px(.75);
      border: 1px solid $demo-primary-color;
      background-color: mix($demo-primary-color, $white, 50);
    }
  }
  &.static-modal-demo {
    .demo-preview-box {
      background-color: #fafafa;
    }

    .modal {
      width: auto;
      height: auto;
      display: block;
      position: static;
    }
  }
  &.static-dropdowns-demo {
    .dropdown-menu {
      display: block;
      position: static;
    }
  }
  &.list-group-demo {
    .list-group {
      max-width: 400px;
    }
  }
  &.scrollbar-demo {
    .view-box {
      height: 480px;
      padding: 15px;
      box-sizing: border-box;
      border: 1px solid #eee;
    }
  }
}

$container-header-height: rem2px(3);
$container-header-margin-bottom: rem2px(.5);

.docs-example-container-header {
  height: $container-header-height;
  margin-bottom: $container-header-margin-bottom;
  background-color: $gray-400;
}

.docs-example-container-sidebar {
  height: rem2px(8);
  width: rem2px(4);
  background-color: lighten($blue, 10%);
  @include float-right;
  top: $container-header-height + $container-header-margin-bottom;
  right: $grid-gutter-width / 2;
}

.docs-example-container-body {
  padding-right: rem2px(4 + .5);
}

.docs-example-container-content {
  height: rem2px(8);
  background-color: lighten($demo-primary-color, 10%);
}

scrollbar {
  width: 10px;
  background-color: #f1f1f1;
}

.scrollbar-slider {
  background-color: #c1c1c1;

  &:hover {
    background-color: darken(#c1c1c1, 10%);
  }
  &:active {
    background-color: darken(#c1c1c1, 20%);
  }
}
